<template>
  <div>
    <van-index-bar :index-list="indexList">
      <div v-for="item in dataList" :key="item.title">
        <van-index-anchor :index="item.title">{{item.title}}</van-index-anchor>
        <van-cell to="/cinemas" v-for="el in item.data" :key="el.cityId" :title="el.name" @click="handle1(el.cityId,el.name)"></van-cell>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import Vue from "vue";
import { IndexBar, IndexAnchor, Cell } from "vant";
import VueCookies from 'vue-cookies'

Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Cell);
Vue.use(VueCookies)

import uri from "@/config/uri";

export default {
  data() {
    return {
      //原始的26字母
      charList: [],
      //筛选过后的字母
      indexList: [],
      //城市数据
      dataList: [],
    };
  },
  
  created() {
    //获取数据
    this.$http.get(uri.getCities).then((ret) => {
      //   console.log(ret.data);
      //   产生26字母
      for (var i = 65; i <= 90; i++) {
        this.charList.push(String.fromCharCode(i));
      }
      // 筛选
      this.charList.forEach((item) => {
        var data = ret.data.cities.filter(
          (el) => el.pinyin.substr(0, 1) == item.toLowerCase()
        );
        // 判断
        // console.log(data);
        if (data.length) {
          this.dataList.push({
            title: item,
            data,
          });
          this.indexList.push(item);
        }
      });
    });
  },
  methods: {
    handle1(title,name) {
      
     this.$cookies.set("cityId",title)
     this.$cookies.set("cityName",name)
    },
  },
};
</script>

